<template>
  <div class="statistics--site">
    <!-- 数据区域 -->
    <information
      :class="isCollect == 0 ? 'totalHide' : isCollect == 1 ? 'totalShow' : ''"
      :data="LocationTotal"
    />
    <!-- 排行榜/筛选 -->
    <seniority
      :storeVue="{
        name: 'workFilterList',
        commit: 'set_FilterList',
        del: 'del_FilterList',
      }"
      @DelFilterList="DelFilterList"
    />
    <!-- 排序 -->
    <filter-type
      :storeVue="{ name: 'workFilterList', commit: 'set_FilterList' }"
      @complete="_complete()"
      :FilterTypeList="FilterTypeList"
    />
    <!-- 大区 -->
    <filter-time
      :storeVue="{ name: 'workFilterList', commit: 'set_FilterList' }"
      @complete="_complete()"
      :FilterTimeList="FilterTimeList"
    />
    <!-- 站点搜索 -->
    <filter-site
      :storeVue="{ name: 'workFilterList', commit: 'set_FilterList' }"
      @complete="_complete()"
    />
    <div class="functional ml-10px">
      <div class="operator" @click="businessFn">
        {{ targetName }} <span class="triangle triangle-down"></span>
      </div>
      <div class="operator ml-22px" @click="sortRank()">
        {{ sortRankList ? "升序" : "降序" }}
        <span
          class="triangle triangle-up"
          :class="sortRankList ? 'triangle-up' : 'triangle-down'"
        ></span>
      </div>
      <div class="serach-icon" @click="serachSite">
        <img
          class="w-20px h-20px"
          src="@/assets/workbench/work/search.png"
          alt=""
        />
      </div>
    </div>
    <div
      class="flex-1 overflow-auto mb-20px locationListSite"
      ref="locationListSite"
    >
      <List
        v-model="loadingStatus"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="location-list">
          <div
            class="location-rows"
            v-for="item in locationList"
            :key="item.id"
          >
            <div class="left-rows">
              <div class="w-18px h-18px mr-13px" v-if="item.id < 3">
                <img
                  :src="
                    require(`@/assets/workbench/work/img_${item.id + 1}.png`)
                  "
                  alt=""
                  class="w-14px h-20px mr-4px"
                />
              </div>
              <div
                class="indexs"
                :class="item.id + 1 < 100 ? 'indexs-two' : 'indexs-three'"
                v-else
              >
                {{ item.id + 1 }}
              </div>
              <span class="location-name">{{ item.locationName }}</span>
            </div>
            <div class="row" @click="toSingleSite(item)">
              <div class="column">
                <span class="num">{{ item.bdNum }}</span
                ><span class="title">BD人数</span>
              </div>
              <div class="column">
                <span class="num">{{ item.followUpNum }}</span
                ><span class="title">跟进数</span>
              </div>
              <div class="column">
                <span class="num">{{ item.sweepStreetNum }}</span
                ><span class="title">扫街数</span>
              </div>
              <div class="column">
                <span class="num">{{ item.newBusinessOpportunityNum }}</span
                ><span class="title">新增商机</span>
              </div>
              <div class="column">
                <span class="num">{{ item.visitNum }}</span
                ><span class="title">拜访数</span>
              </div>
              <div class="column">
                <span class="num">{{ item.newSettledNum }}</span
                ><span class="title">新增入驻</span>
              </div>
              <div class="column">
                <span class="num">{{ item.reVisitNum }}</span
                ><span class="title">回访数</span>
              </div>
              <div class="column">
                <span class="num">{{ item.newSettlementNum }}</span
                ><span class="title">新增结算</span>
              </div>
              <div class="column">
                <span class="num">{{ item.publicLibNum }}</span
                ><span class="title">公海数</span>
              </div>
              <!-- <div class="column">
                <span class="num">{{ item.tempLibNum }}</span
                ><span class="title">临时库数</span>
              </div> -->
              <div class="column">
                <span class="num">{{ item.privateLibNum }}</span
                ><span class="title">私海数</span>
              </div>
              <div class="column">
                <span class="num">{{
                  item.merchantSettledPercent * 100 + "%"
                }}</span
                ><span class="title">商机签约率</span>
              </div>
              <div class="column">
                <span class="num"
                  >{{ item.avgConversionTime
                  }}<span style="font-size: 12px">分钟</span></span
                ><span class="title">平均转化时长</span>
              </div>
            </div>
          </div>
        </div>
      </List>
    </div>
  </div>
</template>

<script>
import bus from "@/config/evenrBus";
import information from "./components/information";
import seniority from "./components/seniority"; //排行榜/筛选
import FilterType from "./components/filtertype"; //排序
import FilterTime from "./components/filtertime.vue"; //大区
// import FilterTime from "./components/filtertimerange.vue"; //(本月/本周/今日版本)
import FilterSite from "./components/filtersite.vue"; //站点搜索
import { data_status } from "@/services/business/dict.js";
import {
  fetchStatisticsLocation,
  getStatisticsSingleLocationInfo,
} from "@/services";
import { List } from "vant";
import { throttle } from "lodash";
import { getYearMonth } from "@/utils/index";
export default {
  components: {
    information,
    seniority,
    FilterType,
    FilterTime,
    FilterSite,
    List,
  },
  data() {
    return {
      locationList: [],
      typelist: {
        0: "large_area_type", //大区类型
        1: "opportunity_sort_field", //工作量-站点
        2: "time_selector", //时间周期选择
      },
      FilterTimeList: [], //大区类型数据
      FilterTypeList: [], //工作量-选择指标数据
      FilterDateList: [], //统计时间-选择指标数据
      sortRankList: false, //排序
      filtration: null, //保存筛选条件
      loadingStatus: false,
      finished: false,
      LocationTotal: {}, //数据汇总
      targetName: "新增入驻", //指标名称
      defualtTime: getYearMonth(new Date()),
      page: {
        pageNum: 1,
      },
      isCollect: "isCollect",
      siteScrollTop: 0,
    };
  },
  created() {
    this.loadingStatus = true;

    let parmas = {
      sort: "desc",
      sortFields: "2",
      monthInt: this.defualtTime,
    };
    this.initLocation(parmas); //加载数据
    this.initLocationTotal(); //加载数据汇总
  },
  activated() {
    //  this.isCollect == "isCollect"
    if (this.$refs.locationListSite) {
      this.$refs.locationListSite.scrollTop = this.siteScrollTop;
    }
  },
  mounted() {
    this.get_data(0); //大区类型
    this.get_data(1); //工作量-站点
    // 先关闭再打开
    this.$root.$off("tab-db-click");
    this.$root.$on("tab-db-click", () => {
      this.$refs.locationListSite.scrollTop = 0;
    });
    //监听滚动
    if (this.$refs.locationListSite) {
      this.$refs.locationListSite.addEventListener(
        "scroll",
        this.scrollLocation
      );
    }
  },

  deactivated() {
    if (this.$route.path != "/workbench/singleLocation") {
      this.isCollect = "isCollect";
      this.siteScrollTop = 0;
    }
    //销毁滚动
    window.removeEventListener("scroll", this.scrollLocation);
  },

  beforeDestroy() {
    this.$root.$off("tab-db-click");
  },
  methods: {
    initLocationTotal() {
      //默当月数据汇总
      let parmas = {
        monthInt: getYearMonth(new Date()),
      };

      getStatisticsSingleLocationInfo(parmas).then((res) => {
        this.LocationTotal = res;
        localStorage.setItem("LocationTotal", JSON.stringify(res));
      });
    },
    initLocation: throttle(function (parmas) {
      parmas.pageNum = this.page.pageNum;
      fetchStatisticsLocation(parmas)
        .then((res) => {
          if (parmas.onLoad) {
            this.locationList = this.locationList.concat(res.data);
          } else {
            this.locationList = res.data;
          }
          this.locationList = this.locationList.map((item, index) => {
            item.id = index;
            return item;
          });
          this.loadingStatus = false; //关闭加载
          // 数据全部加载完成
          if (this.locationList.length >= res.total) {
            this.finished = true; //暂无更多数据
          } else {
            this.finished = false;
          }
        })
        .catch(() => {
          this.finished = true; //暂无更多数据
          this.loadingStatus = false; //关闭加载
        });
    }, 300),
    businessFn() {
      //指标
      bus.$emit("work_selectDataFilterShowType", true);
    },
    DelFilterList() {
      let parmas = this.getSelectedData();
      if (this.sortRankList) {
        parmas.sort = "asc";
      } else {
        parmas.sort = "desc";
      }
      this.filtration = parmas;
      this.resetList(); //重置列表
      this.initLocation(parmas);
    },
    serachSite() {
      //站点
      bus.$emit("work_selectDataFilterShowSite", true);
    },
    toSingleSite(rows) {
      //DB页
      this.$router.push({
        path: "/workbench/singleLocation",
        query: {
          locationId: rows.location,
          regionName: rows.locationName,
        },
      });
    },
    get_data(type) {
      // 商机数据状态
      data_status(this.typelist[type]).then((res) => {
        let packageDta = res;
        // 组装唯一key
        packageDta = packageDta.map((item, index) => {
          item["key"] = this.typelist[type] + index;
          return item;
        });
        if (this.typelist[type] == "large_area_type") {
          this.FilterTimeList = packageDta;
        }
        if (this.typelist[type] == "opportunity_sort_field") {
          this.FilterTypeList = packageDta;
        }
        if (this.typelist[type] == "time_selector") {
          this.FilterDateList = packageDta;
        }
      });
    },
    sortRank: throttle(function () {
      //排序
      this.sortRankList = !this.sortRankList;
      let parmas = {
        ...this.filtration,
        sort: this.sortRankList ? "asc" : "desc",
      };
      if (!parmas.sortFields) {
        parmas.sortFields = 2; //默认选择新增商机
      }
      this.resetList(); //重置列表
      this.initLocation(parmas);
    }, 100),
    _complete() {
      let parmas = this.getSelectedData();
      this.filtration = parmas;
      this.getSelectedDataTargetName(); // 返回选中的指标
      this.resetList(); //重置列表
      if (parmas.sortFields === 0) {
        delete parmas.sortFields;
      }
      this.initLocation(parmas);
    },
    getSelectedData() {
      //获取选择的数据
      let list = this.$store.state.work.workFilterList;
      let time = null;
      if (list._RegionTimeKeyName && list._RegionTimeKeyName[0]) {
        time = list._RegionTimeKeyName[0].name.replace(/-/g, "").split(" ");
      }
      let parmas = {
        sortFields:
          list._statusType && list._statusType[0]
            ? list._statusType[0].type
            : 2, //排序的字段
        areaType:
          list._statusRegion && list._statusRegion[0]
            ? list._statusRegion[0].type
            : null, //大区类型
        // beginTime: time ? time[0] : null, //开始时间
        // endTime: time ? time[2] : null, //结束时间
        monthInt: list.monthInt && list.monthInt[0]?.value,
        locationName:
          list._statusLocation && list._statusLocation[0]
            ? list._statusLocation[0].name
            : null, //站点名称
        sort: this.sortRankList ? "asc" : "desc", //排序
      };
      return parmas;
    },
    getSelectedDataTargetName() {
      let list = this.$store.state.work.workFilterList;
      if (list._statusType && list._statusType[0]) {
        this.targetName = list._statusType[0].name;
      }
    },
    scrollLocation() {
      // 声明dom
      var locationListDom = this.$refs.locationListSite;
      //顶部距离
      var scrollTop = locationListDom.scrollTop;
      if (scrollTop > 60) {
        this.isCollect = 0;
      } else if (this.isCollect != "isCollect") {
        this.isCollect = 1;
      }
      //记录滚动的高度
      this.siteScrollTop = scrollTop;
    },
    /**
     * 上拉触底
     */
    onLoad: throttle(function () {
      let parmas = this.getSelectedData();
      parmas.onLoad = true;
      ++this.page.pageNum;
      this.initLocation(parmas);
    }, 300),
    resetList() {
      this.page.pageNum = 1;
      this.loadingStatus = true;
      this.locationList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}
.statistics--site {
  display: flex;
  flex-direction: column;
  ::v-deep {
    .van-popup--bottom.van-popup--round {
      background: #ffffff;
      box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.09);
      border-radius: 10px 10px 0px 0px;
    }
    .totalHide {
      animation: totalHideAn 0.3s linear;
      visibility: hidden;
      margin-top: -163px;
    }
    .totalShow {
      animation: totalShowAn 0.3s linear;
      visibility: visible;
      margin-top: 0px;
    }
    @keyframes totalHideAn {
      from {
        margin-top: 0;
      }
      to {
        margin-top: -163px;
      }
    }
    @keyframes totalShowAn {
      from {
        margin-top: -163px;
      }
      to {
        margin-top: 0px;
      }
    }
  }
  .triangle {
    margin-left: 7px;
    border-width: 4px;
    border-style: solid;
  }
  .triangle-up {
    margin-top: -4px;
    border-color: transparent transparent #999 transparent;
  }

  .triangle-down {
    margin-top: 4px;
    border-color: #999 transparent transparent transparent;
  }

  .functional {
    height: 44px;
    background: #ffffff;
    box-shadow: inset 0px 0px 0px 0px #eeeeee;
    padding: 12px 16px;
    display: flex;
    position: relative;
    @include minxi-fontstyle(14px, 400, #333333);
    .operator {
      display: flex;
      align-items: center;
    }
    .serach-icon {
      position: absolute;
      right: 10px;
      top: 12px;
    }
  }
  .locationListSite {
    border-radius: 0px 0px 0px 10px;
    margin-left: 10px;
    .location-list {
      background: #ffffff;
      box-shadow: inset 0px 0px 0px 0px #eeeeee;
      -webkit-overflow-scrolling: touch;
      transform: translateZ(0);
      position: relative;
      .location-rows {
        display: flex;
        background: #ffffff;
        overflow: hidden;
      }
      & .location-rows:last-child {
        .left-rows {
          border-bottom: none;
        }
      }
      .left-rows {
        width: 123px;
        height: 62px;
        display: flex;
        align-items: center;
        position: sticky;
        left: 0px;
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 0 16px;
        .location-name {
          width: 60px;
          @include minxi-fontstyle(14px, 400, #1f1f1f);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .indexs {
          background: #caccd5;
          border-radius: 50%;
          @include minxi-fontstyle(10px, 400, #ffffff);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .indexs-two {
          margin-right: 13px;
          width: 18px;
          height: 18px;
        }
        .indexs-three {
          margin-right: 9px;
          width: 22px;
          height: 22px;
        }
      }
      .row {
        display: flex;
        height: 62px;
        align-items: center;
        border-bottom: 1px solid #eee;
        overflow: scroll hidden;
        .column {
          display: flex;
          flex-direction: column;
          white-space: nowrap;
          align-items: center;
          margin-right: 16px;
          .num {
            font-size: 15px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #333333;
          }
          .title {
            @include minxi-fontstyle(10px, 400, #999999);
          }
        }
      }
      /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
      .row::-webkit-scrollbar {
        width: 3px;
        height: 10px;
        background-color: #fff;
      }

      /*定义滑块 内阴影+圆角*/
      .row:-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
        background-color: #dde0e4;
      }
    }
  }

  //模拟加载数据
  .scrollLoading {
    .scrollLoadingStatus {
      text-align: center;
    }
  }
  .loadingShow {
    visibility: visible;
    opacity: 1;
  }
  .loadingHide {
    visibility: hidden;
    opacity: 0;
  }

  .location-rows:last-child .row {
    border-bottom: none;
  }
  .location-rows:last-child .row .left-rows {
    border-bottom: none;
  }
  .no-content {
    color: #969799;
    font-size: 14px;
    text-align: center;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
  }
}
</style>
